<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rollCall</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<style>
    table {
        border-spacing: 0px;
        margin: 10% auto;
    }

    td {
        width: 100px;
        height: 50px;
        border: 1px solid black;
        text-align: center;
    }
</style>
<body>
<table>
    <caption><h1>点名系统</h1></caption>
    <tr>
        <td colspan="2">
            <button id="btn1">开始</button>
        </td>
        <td></td>
        <td colspan="2">
            <button id="btn2">结束</button>
        </td>
    </tr>
</table>
</body>
<script>
    var names = null;
    var index = -1;
    var count = 0;
    var interval;
    var flag = true;
    $(
        function () {
            $.post(
                "call",
                {
                    method: "count"
                },
                function (resp) {
                    count = resp;
                },
                'text'
            );
            $.post(
                "call",
                {
                    method: "show"
                },
                function (resp) {
                    names = resp;
                    var j = 0;
                    while (true) {
                        var tr =
                            "<tr class='tr'>" +
                            "<td id='td" + j + "'>" + resp[j++] + "</td>" +
                            "<td id='td" + j + "'>" + resp[j++] + "</td>" +
                            "<td id='td" + j + "'>" + resp[j++] + "</td>" +
                            "<td id='td" + j + "'>" + resp[j++] + "</td>" +
                            "<td id='td" + j + "'>" + resp[j++] + "</td>" +
                            "</tr>"
                        $("table").append(tr);
                        if (resp[j] == null) {
                            break;
                        }
                    }
                },
                'json'
            );
        }
    );

    function randomNames() {
        $("#td" + index).css("background-color", "white");
        index = parseInt(Math.random() * count);
        $("#td" + index).css("background-color", "red");
    }

    $("#btn1").click(
        function () {
            if (flag) {
                interval = setInterval(function () {
                    randomNames();
                }, 30);
                flag = false;
            }
        }
    );
    $("#btn2").click(
        function () {
            clearInterval(interval);
            flag = true;
        }
    )
</script>
</html>